<template>
  <div>
    <!--    菜单背景-->
    <div style="position: absolute;height: 100%;width: 100%;top: 0">
      <div class="menuLeftBg"></div>
    </div>
    <el-row>
      <el-col :span="3">
        <el-menu
          :router="true"
          default-active="person"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="person">
            <i class="el-icon-setting"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          <el-menu-item index="coupon">
            <i class="el-icon-setting"></i>
            <span slot="title">用户优惠信息管理</span>
          </el-menu-item>
          <el-menu-item index="userdetail">
            <i class="el-icon-setting"></i>
            <span slot="title">用户详情管理</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="20">
        <div class="rightContainer">
        <router-view/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        data() {
            return {
                msg: 'Welcome to Your Vue.js App'
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .menuLeftBg {
    background: #545c64;
    position: relative;
    top: 0;
    width: 12.45%;
    height: 100%;
  }
  .rightContainer{
    padding-top: 10px;
  }

</style>
